import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import "./index.scss";

export default function BtTab({ value, onChange, tabs }) {
  const [tabList, setTabList] = useState(tabs);
  // 记录上一个tab
  const [lastTab, setLastTab] = useState(value);
  useEffect(() => {
    setLastTab(0);
    setTabList(tabs);
  }, [tabs]);
  // 点击tab
  const handleClick = (value: string) => {
    console.log(value,lastTab, "value");
    // 防止点击和当前tab相同
    if (value === lastTab) return;
    setLastTab(value);
    onChange(value);
  };
  return (
    <View className="tab-bar">
      {tabList.map((tab) => (
        <View
          key={tab.value}
          className={`tab-item${value === tab.value ? " active" : ""}`}
          onClick={() => handleClick(tab.value)}
          style={{
            width: 100 / tabs.length + "%",
          }}
        >
          <Text className="tab-label">{tab.label}</Text>
          <Text
            className={`'tab-bottom' ${value === tab.value ? "show" : "hide"}`}
          />
        </View>
      ))}
    </View>
  );
}
